<template>
  <div class="one_echarts_div" v-loading="loading" element-loading-text="拼命加载中">
    <!-- <el-button @click="fun1">点击获取数据</el-button> -->
    <!-- <el-button @click="download">导出折线图</el-button> -->
    <div ref="img">
      <div class="top_btn">
        <!-- <div class="btn_div" :class="[oneIsBool ? 'border-unactive' : '']" @click="handleClick(1)">{{title}}———</div> -->
        <div class="btn_div">{{title}}———</div>
      </div>
      <div class="alarm_visualization_configuration" ref="one"></div>
    </div>
    <img @click="download" class="download_img" src="../../assets/img/download.png" alt="">
  </div>
</template>

<script>
  import html2Canvas from 'html2canvas';
  import { dataChartData } from "@/api/data";
  import { MINUTE } from "@/data/lostCount";

  export default {
    props: {
      // title: {
      //   type: String,
      //   require: true
      // },
      // list: {
      //   type: Array,
      //   require: true
      // }
    },
    data() {
      return {
        title: "",
        loading: false,
        list: [],
        timer: null,
        configX: {},
        configY: {},
        configZ: {},
        oneIsBool: false,
        twoIsBool: false,
        threeIsBool: false,
        option: null,
        x: true,
        y: true,
        z: true,
        series: [
          {
            showSymbol: false,
            name: "X轴",
            type: "line",
            data: [
              // { name: "传感器1(X轴)", value: 120 },
              // { name: "传感器1(X轴)", value: -132 },
              // { name: "传感器1(X轴)", value: 101 },
              // { name: "传感器1(X轴)", value: 134 },
              // { name: "传感器1(X轴)", value: 90 },
              // { name: "传感器1(X轴)", value: 230 },
              // { name: "传感器1(X轴)", value: 210 }
            ],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              }
            }
          },
          {
            name: "Y轴",
            type: "line",
            showSymbol: false,
            data: [
              // { name: "传感器1(Y轴)", value: 150 },
              // { name: "传感器1(Y轴)", value: -132 },
              // { name: "传感器1(Y轴)", value: 101 },
              // { name: "传感器1(Y轴)", value: 134 },
              // { name: "传感器1(Y轴)", value: 90 },
              // { name: "传感器1(Y轴)", value: 230 },
              // { name: "传感器1(Y轴)", value: 210 }
            ],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              }
            }
          },
          {
            name: "Z轴",
            type: "line",
            showSymbol: false,
            data: [
              // { name: "传感器1(Z轴)", value: 102 },
              // { name: "传感器1(Z轴)", value: -132 },
              // { name: "传感器1(Z轴)", value: 83 },
              // { name: "传感器1(Z轴)", value: 234 },
              // { name: "传感器1(Z轴)", value: 90 },
              // { name: "传感器1(Z轴)", value: -230 },
              // { name: "传感器1(Z轴)", value: 110 }
            ],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                }
              }
            }
          }
        ]
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts();
      });
    },
    watch: {
      list: {
        handler() {
          // console.log("走进", this.list);
          if (this.list.length > 0) {
            this.configX = {
              current: this.list[this.list.length - 1].currentX,
              thresholdPositive: this.list[this.list.length - 1].measuringThreshold.thresholdPositive,
              thresholdNegative: this.list[this.list.length - 1].measuringThreshold.thresholdNegative,
              warningPositive: this.list[this.list.length - 1].measuringThreshold.warningPositive,
              warningNegative: this.list[this.list.length - 1].measuringThreshold.warningNegative,
              totalRange: this.list[this.list.length - 1].measuringThreshold.totalRange,
            };
            this.configY = {
              current: this.list[this.list.length - 1].currentY,
              thresholdPositive: this.list[this.list.length - 1].measuringThreshold.thresholdPositive,
              thresholdNegative: this.list[this.list.length - 1].measuringThreshold.thresholdNegative,
              totalRange: this.list[this.list.length - 1].measuringThreshold.totalRange,
              warningPositive: this.list[this.list.length - 1].measuringThreshold.warningPositive,
              warningNegative: this.list[this.list.length - 1].measuringThreshold.warningNegative,
            };
            this.configZ = {
              current: this.list[this.list.length - 1].currentZ,
              thresholdPositive: this.list[this.list.length - 1].measuringThreshold.thresholdPositive,
              thresholdNegative: this.list[this.list.length - 1].measuringThreshold.thresholdNegative,
              totalRange: this.list[this.list.length - 1].measuringThreshold.totalRange,
              warningPositive: this.list[this.list.length - 1].measuringThreshold.warningPositive,
              warningNegative: this.list[this.list.length - 1].measuringThreshold.warningNegative,
            };
            for (let i = 0; i < this.list.length; i++) {
              this.series[0].data.push({
                name: this.list[i].rtuName + "-X轴",
                value: this.list[i].currentX
              });
              this.series[1].data.push({
                name: this.list[i].rtuName + "-Y轴",
                value: this.list[i].currentY
              });
              this.series[2].data.push({
                name: this.list[i].rtuName + "-Z轴",
                value: this.list[i].currentZ
              });
            }
            this.$nextTick(() => {
              this.initEcharts();
            });
          }
        },
        deep: true,
        immediate: true,
      },
      x(val) {
        if (val) {
          // alert("打开X轴");
        } else {
          // alert("关闭X轴");
        }
      },
      y(val) {
        if (val) {
          // alert("打开Y轴");
        } else {
          // alert("关闭Y轴");
        }
      },
      z(val) {
        if (val) {
          // alert("打开Z轴");
        } else {
          // alert("关闭Z轴");
        }
      }
    },
    async created() {
      await this.dataChartData();
      // this.timer = setInterval(async () => {
      //   await this.dataChartData();
      // }, 60000);
    },
    destroyed() {
      // clearInterval(this.timer);
      // this.timer = null;
    },
    methods: {
      // 获取图表数据
      async dataChartData() {
        try {
          this.loading = true;
          let startTimeInSecond = 0;
          if (localStorage.getItem("historyTimeType") == 1) {
            const type = localStorage.getItem("timeType");
            if (type == "week") {
              startTimeInSecond = Math.floor((Date.now() / 1000) - (7 * 24 * 60 * 60));
            } else if (type == "oneMonth") {
              startTimeInSecond = Math.floor((Date.now() / 1000) - (30 * 24 * 60 * 60));
            } else if (type == "twoMonth") {
              startTimeInSecond = Math.floor((Date.now() / 1000) - (60 * 24 * 60 * 60));
            } else if (type == "threeMonth") {
              startTimeInSecond = Math.floor((Date.now() / 1000) - (90 * 24 * 60 * 60));
            }
          } else{
            if(Number(localStorage.getItem("endTimeInSecond")) - Number(localStorage.getItem("startTimeInSecond")) > 30 * 24 * 60 * 60) {
              this.$message.error("自定义时间区间不得超过1个月");
              this.$parent.isShow = false;
              return false;
            }
          }
          // this.loading = true;
          const { code, result: { data }, message } = await dataChartData({
            uuid: JSON.parse(localStorage.getItem("historyUuid")),
            rtuIndex: JSON.parse(localStorage.getItem("historyRtuIndexList")),
            startTimeInSecond: localStorage.getItem("historyTimeType") == 1 ? Number(startTimeInSecond) : Number(localStorage.getItem("startTimeInSecond")),
            endTimeInSecond: localStorage.getItem("historyTimeType") == 1 ? Number(Math.floor(Date.now() / 1000)) : Number(localStorage.getItem("endTimeInSecond"))
          });
          if (code == 0) {
            if (data.length > 0) {
              const arr = JSON.parse(JSON.stringify(data[0].detail));
              arr.forEach((item, index) => {
                item.dataTime = this.handleFormatter(item);
                item.currentX = item.currentX + item.initialX;
                item.currentY = item.currentY + item.initialY;
                item.currentZ = item.currentZ + item.initialZ;
              });
              this.list = this.unipFun2(arr);

              // 补数
              let rtuArr1 = [];
              const rtuName = data[0].rtuName;
              for (let index = 0; index < this.list.length; index++) {
                let item = this.list[index];
                const first = new Date(rtuArr1.slice(-1)).getTime();
                const last = new Date(item.dataTime).getTime();
                console.log("last", item.dataTime);
                // console.log("box", box);
                console.log("数组长度" + this.list.length, index);
                // console.log("当前时间", item.dataTime);
                // console.log("last", this.handleFormatter({ dataTime: last + 60000 }));
                // console.log("first", this.handleFormatter({ dataTime: first + 60000 }));
                // console.log("外面", last - first);
                // console.log("wwwrtuArr", rtuArr1);
                if (rtuArr1.length != 0) {// 从第二次开始比较
                  if (last - first != 60000) { // 需要补

                    // console.log("last", this.handleFormatter({ dataTime: last + 60000 }));
                    // console.log("first", this.handleFormatter({ dataTime: first + 60000 }));
                    // console.log("rtuArr", rtuArr1);
                    // console.log("差", last - first);
                    if (last - first >= MINUTE) {
                      console.log(1);
                      this.list.splice(index, 0, {
                        rtuName,
                        currentX: "",
                        currentY: "",
                        currentZ: "",
                        dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                        // id: Date.now()
                      });
                      rtuArr1.push(this.handleFormatter({ dataTime: first + 60000 }));
                    } else {
                      console.log(2);
                      this.list.splice(index, 0, {
                        rtuName,
                        currentX: this.list[index - 1].currentX,
                        currentY: this.list[index - 1].currentY,
                        currentZ: this.list[index - 1].currentZ,
                        dataTime: this.handleFormatter({ dataTime: first + 60000 }),
                        // id: Date.now()
                      });
                      // 最后将时间添加到数组
                      rtuArr1.push(this.handleFormatter({ dataTime: first + 60000 }));
                    }
                  } else { // 直接添加
                    // console.log("123", item.dataTime);
                    rtuArr1.push(item.dataTime);
                  }
                } else {
                  // 第一次直接添加
                  rtuArr1.push(item.dataTime);
                }
              }

              this.loading = false;
              this.title = data[0].detail[0].rtuName;
              if (data.length > 0) {
                // this.list = data[0].detail;
              }
            } else {
              this.loading = false;
              this.$parent.isShow = false;
            }
          }
        } catch (err) {
          this.loading = false;
          console.log("获取一个历史数据折线图调用接口报错了", err);
        }
      },
      handleFormatter(row) {
        return `${new Date(row.dataTime).getFullYear()}-${new Date(row.dataTime).getMonth() + 1}-${new Date(row.dataTime).getDate()} ${new Date(row.dataTime).getHours()}:${new Date(row.dataTime).getMinutes() < 10 ? "0" + new Date(row.dataTime).getMinutes() : new Date(row.dataTime).getMinutes()}`;
      },
      unipFunc(arr) {
        let arr1 = []; //存id
        let newArr = []; //存新数组
        for (let i in arr) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            arr1.push(arr[i].dataTime);
            newArr.push(arr[i]);
          }
        }
        return newArr;
      },
      unipFun2(arr) {
        let arr1 = [];
        let newArr = [];
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr1.indexOf(arr[i].dataTime) == -1) {
            arr1.unshift(arr[i].dataTime);
            newArr.unshift(arr[i]);
          }
        }
        return newArr;
      },
      download() {
        const ref = this.$refs.img // 截图区域
        html2Canvas(ref, {
          backgroundColor: '#fff',
          useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png')
          const creatDom = document.createElement('a')
          document.body.appendChild(creatDom)
          creatDom.href = dataURL
          creatDom.download = `${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日 ${new Date().getHours()}点${new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes()}`;
          creatDom.click()
        })
      },
      fun1() {
        // console.log(this.list);
        const newList = this.list.map(item => item.dataTime);
        // console.log("所有时间节点", newList);
      },
      handleClick(type) {
        if (type == 1) {
          this.oneIsBool = !this.oneIsBool;
          if (this.oneIsBool) {
            this.series.forEach((item, idx) => {
              if (item.data[0].name.split("(")[0] == this.title) {
                this.$delete(this.series, idx);
              }
            });
          } else {
            const arr = [
              {
                name: "X轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器1(X轴)", value: 120 },
                  { name: "传感器1(X轴)", value: -132 },
                  { name: "传感器1(X轴)", value: 101 },
                  { name: "传感器1(X轴)", value: 134 },
                  { name: "传感器1(X轴)", value: 90 },
                  { name: "传感器1(X轴)", value: 230 },
                  { name: "传感器1(X轴)", value: 210 }
                ]
              },
              {
                name: "Y轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器1(Y轴)", value: 150 },
                  { name: "传感器1(Y轴)", value: -132 },
                  { name: "传感器1(Y轴)", value: 101 },
                  { name: "传感器1(Y轴)", value: 134 },
                  { name: "传感器1(Y轴)", value: 90 },
                  { name: "传感器1(Y轴)", value: 230 },
                  { name: "传感器1(Y轴)", value: 210 }
                ]
              },
              {
                name: "Z轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器1(Z轴)", value: 102 },
                  { name: "传感器1(Z轴)", value: -132 },
                  { name: "传感器1(Z轴)", value: 83 },
                  { name: "传感器1(Z轴)", value: 234 },
                  { name: "传感器1(Z轴)", value: 90 },
                  { name: "传感器1(Z轴)", value: -230 },
                  { name: "传感器1(Z轴)", value: 110 }
                ]
              }
            ];
            arr.forEach((item, index) => {
              item.data.forEach(childItem => {
                if (index == 0) {
                  this.$set(childItem, "name", `${this.title}(X轴)`);
                } else if (index == 1) {
                  this.$set(childItem, "name", `${this.title}(Y轴)`);
                } else {
                  this.$set(childItem, "name", `${this.title}(Z轴)`);
                }
              });
            });
            this.series.push(...arr);
          }
        } else if (type == 2) {
          this.twoIsBool = !this.twoIsBool;
          if (this.twoIsBool) {
            this.series.forEach((item, idx) => {
              if (item.data[0].name.includes("传感器2")) {
                this.$delete(this.series, idx);
              }
            });
          } else {
            const arr = [
              {
                name: "X轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器2(X轴)", value: 130 },
                  { name: "传感器2(X轴)", value: -132 },
                  { name: "传感器2(X轴)", value: 101 },
                  { name: "传感器2(X轴)", value: 134 },
                  { name: "传感器2(X轴)", value: 90 },
                  { name: "传感器2(X轴)", value: 230 },
                  { name: "传感器2(X轴)", value: 210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Y轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器2(Y轴)", value: 140 },
                  { name: "传感器2(Y轴)", value: -132 },
                  { name: "传感器2(Y轴)", value: 101 },
                  { name: "传感器2(Y轴)", value: 134 },
                  { name: "传感器2(Y轴)", value: 90 },
                  { name: "传感器2(Y轴)", value: 230 },
                  { name: "传感器2(Y轴)", value: 210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Z轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器2(Z轴)", value: 80 },
                  { name: "传感器2(Z轴)", value: 123 },
                  { name: "传感器2(Z轴)", value: -200 },
                  { name: "传感器2(Z轴)", value: -134 },
                  { name: "传感器2(Z轴)", value: 120 },
                  { name: "传感器2(Z轴)", value: 130 },
                  { name: "传感器2(Z轴)", value: -210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dotted" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              }
            ];
            this.series.push(...arr);
          }
        } else {
          this.threeIsBool = !this.threeIsBool;
          if (this.threeIsBool) {
            this.series.forEach((item, idx) => {
              if (item.data[0].name.includes("传感器3")) {
                this.$delete(this.series, idx);
              }
            });
          } else {
            const arr = [
              {
                name: "X轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器3(X轴)", value: -120 },
                  { name: "传感器3(X轴)", value: -132 },
                  { name: "传感器3(X轴)", value: 101 },
                  { name: "传感器3(X轴)", value: 134 },
                  { name: "传感器3(X轴)", value: 90 },
                  { name: "传感器3(X轴)", value: 230 },
                  { name: "传感器3(X轴)", value: 210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dashed" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Y轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器3(Y轴)", value: 130 },
                  { name: "传感器3(Y轴)", value: 32 },
                  { name: "传感器3(Y轴)", value: -101 },
                  { name: "传感器3(Y轴)", value: 134 },
                  { name: "传感器3(Y轴)", value: 90 },
                  { name: "传感器3(Y轴)", value: 230 },
                  { name: "传感器3(Y轴)", value: 210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dashed" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              },
              {
                name: "Z轴",
                type: "line",
                stack: "Total",
                data: [
                  { name: "传感器3(Z轴)", value: 30 },
                  { name: "传感器3(Z轴)", value: 132 },
                  { name: "传感器3(Z轴)", value: -201 },
                  { name: "传感器3(Z轴)", value: -134 },
                  { name: "传感器3(Z轴)", value: 190 },
                  { name: "传感器3(Z轴)", value: 130 },
                  { name: "传感器3(Z轴)", value: -210 }
                ],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2,
                      type: "dashed" //'dotted'虚线 'solid'实线
                    }
                  }
                }
              }
            ];
            this.series.push(...arr);
          }
        }
        if (this.oneIsBool && this.twoIsBool && this.threeIsBool) {
          this.series = [];
        }
        if (this.oneIsBool) {
          this.series.forEach((item, idx) => {
            if (item.data[0].name.split("(")[0] == this.title) {
              this.$delete(this.series, idx);
              console.log(1);
            }
          });
        }
        if (this.twoIsBool) {
          this.series.forEach((item, idx) => {
            if (item.data[0].name.includes("传感器2")) {
              this.$delete(this.series, idx);
            }
          });
        }
        if (this.threeIsBool) {
          this.series.forEach((item, idx) => {
            if (item.data[0].name.includes("传感器3")) {
              this.$delete(this.series, idx);
            }
          });
        }
        this.$set(this.option, "series", this.series);

        console.log("series", this.series);
        this.updateEcharts();
      },
      updateEcharts() {
        const echarts = require("echarts");
        this.$echarts.dispose(this.$refs["one"]);
        const myChart = this.$echarts.init(this.$refs["one"]);
        const _this = this;
        myChart.on("legendselectchanged", function (paramas) {
          // console.log(paramas);
          if (paramas.name == "X轴") {
            if (paramas.selected["X轴"]) {
              // alert("打开X轴");
              _this.x = true;
              console.log("xxxxxxxx", _this.x);
            } else {
              // alert("关闭X轴");
              _this.x = false;
              console.log("xxxxxxxx2", _this.x);
            }
          } else if (paramas.name == "Y轴") {
            if (paramas.selected["Y轴"]) {
              // alert("打开Y轴");
              _this.y = true;
            } else {
              // alert("关闭Y轴");
              _this.y = false;
            }
          } else {
            if (paramas.selected["Z轴"]) {
              // alert("打开Z轴");
              _this.z = true;
            } else {
              // alert("关闭Z轴");
              _this.z = false;
            }
          }
        });
        myChart.setOption(this.option);
      },
      initEcharts() {
        const echarts = require("echarts");
        const myChart = this.$echarts.init(this.$refs["one"]);
        const _this = this;
        myChart.on("legendselectchanged", function (paramas) {
          if (paramas.name == "X轴") {
            if (paramas.selected["X轴"]) {
              // alert("打开X轴");
              _this.x = true;
            } else {
              // alert("关闭X轴");
              _this.x = false;
            }
          } else if (paramas.name == "Y轴") {
            if (paramas.selected["Y轴"]) {
              // alert("打开Y轴");
              _this.y = true;
            } else {
              // alert("关闭Y轴");
              _this.y = false;
            }
          } else {
            if (paramas.selected["Z轴"]) {
              // alert("打开Z轴");
              _this.z = true;
            } else {
              // alert("关闭Z轴");
              _this.z = false;
            }
          }
        });

        this.option = {
          // title: {
          //   text: "传感器详情"
          // },
          tooltip: {
            confine: true,
            appendToBody: true,
            trigger: "axis",
            formatter: function (info) {
              // console.log(info);
              var res = null;

              if (info.length == 3) {
                res = `<div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[0].color}
                                  "
                          >●</div>
                          <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                        </div>
                        <div>
                          <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[1].color}
                            ">●</div>
                            <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                        </div>
                        <div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[2].color}">●</div>
                          <span>${info[2].name + ": " + Math.round(info[2].value)}</span>
                        </div>`;
              } else if (info.length == 2) {
                res = `<div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[0].color}
                                  "
                          >●</div>
                          <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                        </div>
                        <div>
                          <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[1].color}
                            ">●</div>
                            <span>${info[1].name + ": " + Math.round(info[1].value)}</span>
                        </div>`;
              } else if (info.length == 1) {
                res = `<div>
                          <div style="
                            display: inline-block;
                            width:  10px;
                            height: 20px;
                            color: ${info[0].color}
                                  "
                          >●</div>
                          <span>${info[0].name + ": " + Math.round(info[0].value)}</span>
                        </div>`;
              }
              return res;
            }
          },
          legend: {
            // data: ["X轴", "Y轴", "Z轴"],
            data: [
              {
                name: "X轴",
                lineStyle: {
                  type: "solid"
                }
              },
              {
                name: "Y轴",
                lineStyle: {
                  type: "solid"
                }
              },
              {
                name: "Z轴",
                lineStyle: {
                  type: "solid"
                }
              }
            ],
            selected: {}
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {
          //       show: true,                      //是否显示该工具。
          //       type: "png",                     //保存的图片格式。支持 'png' 和 'jpeg'。
          //       name: this.list[0].rtuName,                    //保存的文件名称，默认使用 title.text 作为名称
          //       backgroundColor: "#ffffff",      //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
          //       title: this.list[0].rtuName,
          //       pixelRatio: 1                 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
          //     }
          //   }
          // },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              show: true,
              rotate: 45
            },
            // 横轴时间节点
            data: this.list.map(item => {
              const newDate = new Date(item.dataTime);
              const year = newDate.getFullYear();
              const month = newDate.getMonth() + 1;
              const date = newDate.getDate();
              const hours = newDate.getHours();
              const minutes = newDate.getMinutes();
              // 日期+时间
              return `${year}-${month}-${date} ${hours}:${minutes < 10 ? "0" + minutes : minutes}`;
              // 时间
              // return `${hours}:${minutes < 10 ? "0" + minutes : minutes}`;
            })
            // data: [
            //   "2023/7/19 9:21",
            //   "2023/7/19 9:31",
            //   "2023/7/19 9:41",
            //   "2023/7/19 9:51",
            //   "2023/7/19 10:01",
            //   "2023/7/19 10:11",
            //   "2023/7/19 10:21"
            // ]
          },
          yAxis: {
            type: "value"
          },
          dataZoom: [
            {
              type: "inside", //inside鼠标缩放
              // type: "slider", //inside鼠标缩放
              show: true,
              start: 0,
              end: 1000,
              xAxisIndex: [0]
            }
          ],
          series: this.series
        };
        myChart.setOption(this.option);
      }
    }
  };
</script>

<style scoped>
  .one_echarts_div {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .one_echarts_div .download_img {
    width: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 10px;
  }

  .alarm_visualization_configuration {
    width: 100%;
    height: 400px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .top_btn {
    display: flex;
    margin-bottom: 20px;
    position: absolute;
    z-index: 10;
  }

  .btn_div {
    /* width: 110px; */
    border: 1px solid red;
    margin-left: 20px;
    color: 1;
    user-select: none;
  }

  .two {
    border-style: dashed;
  }

  .three {
    border-style: dotted;
  }

  .border-unactive {
    border-color: transparent;
  }

  .box_ball_div_one_first {
    display: flex;
    padding: 20px 100px;
    align-items: center;
    box-sizing: border-box;
    justify-content: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }

  .coordinate_system {
    display: flex;
    width: 60%;
    margin-left: 20%;
    position: absolute;
  }
</style>